<template>
	<view>
		<view class="goods_box" >
			<view class="goods_list" v-for="(item,index) in param" :key="item.id" @click="changeClass(index,item)" :class="{goods_list_active : btn_status1 == index}">
				{{item.product_name}}
			</view>
		</view>
		<view class="new_price">
			<view style="color: red;font-size: 32rpx;font-weight: bold;margin-left: 20rpx;">￥ {{new_price}} <text v-if="x_price != 0" style="text-decoration: line-through;font-size: 28rpx;font-weight: normal;color: #ccc;margin-left: 10rpx;">{{x_price}}</text></view>
			<view class="new_price_btn" @click="buy()">
				去购买
			</view>
		</view>
		<view style="width: 100%;height: 60rpx;">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			param: []
		},
		data() {
			return {
				btn_status: '',
				category_id: '',
				listInfo: [],
				city_name: '',
				btn_status1: -1,
				new_price: 0,
				buy_data:{},
				x_price:0
			};
		},
		methods: {
			changeClass(index,data) {
				console.log(data.sku[0],'data');
				this.btn_status1 = index
				this.new_price = data.product_price
				this.x_price = data.line_price
				let self = this
				self.buy_data = data.sku[0]
			},
			buy(){
				if(this.btn_status1 == -1){
					uni.showToast({
						title:'请选择服务',
						icon:'none'
					})
					return false;
				}
				let self = this
				let url = '/pages/order/confirm-order?product_id=' + self.buy_data.product_id + '&product_num=1&product_sku_id=0&order_type=buy';
				uni.reLaunch({
					url:url
				})
			}
		},

	}
</script>

<style lang="scss">
	.new_price {
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		border: 1px solid #2263B3;
		margin-left: 5%;
		border-radius: 50rpx;
		position: relative;
	}

	.new_price_btn {
		width: 180rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		background-color: #2263B3;
		border-radius: 50rpx;
		text-align: center;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 30rpx;
		letter-spacing: 5rpx;
	}

	.fenlei {
		width: 100%;
		height: 100rpx;
		background-color: #fff;

		color: #999;
		display: flex;

		.father {
			width: 50%;
			height: 100rpx;

			.son {
				width: 150rpx;
				height: 100rpx;
				text-align: center;
				line-height: 100rpx;
				margin: 0 auto;
				font-weight: bold;
			}
		}

	}

	.son_active {
		color: #2263B3;
		border-bottom: 3px solid #2263B3;
	}

	.list {
		width: 90%;
		margin-left: 5%;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.product_name {
		width: 100%;
		text-align: center;
		margin: 10rpx 0;
		font-size: 30rpx;
	}

	.city {

		width: 160rpx;
		background-color: #fff;
		padding-left: 20rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.goods_box {
		width: calc(100% - 20rpx);
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx;
	}

	.goods_list {
		font-size: 24rpx;
		width: 30%;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		margin-left: 10rpx;
		border-radius: 10rpx;
		border: 4rpx solid #F2F2F2;
		margin-bottom: 20rpx;
	}

	.goods_list_active {
		color: #2263B3;
		background-color: #D2E6FF;
		border: 4rpx solid #ABC8EC;
	}
</style>